/*
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*最大的布局*/
.chat-msg-page {
    flex-direction: column;/*flex容器主轴方向  垂直方向从上到下*/
    display: flex;/*弹性布局*/
    justify-content: center;/*flex容器当前行的主轴对齐格式 项目位于容器的中心。*/
    align-items: center;/*flex容器当前行的交叉轴对齐格式 元素在交叉轴居中*/
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

/*上方TitleBar*/
.title-bar {
    align-items: center;
    width: 100%;
    height: 150px;
    margin-left: 25px;
    margin-right: 25px;
}

.title-bar-new {
    align-items: center;
    width: 100%;
    height: 150px;
    margin-left: 15px;
    margin-right: 25px;
}

.chat-msg-title {
    padding-left: 30px;
    padding-right: 30px;
    font-size: 50px;
}

.chat-msg-back-div {
    margin-left: 20px;
    width: 100px;
}

.chat-msg-back-div:active {
    background-color: lightgray;
}

/*返回按钮*/
.chat-msg-back-container {
    width: 80px;
    height: 100px;
    padding-left: 26px;
    padding-top: 26px;
}

.chat-msg-back {
    height: 48px;
    width: 48px;
}

.chat-msg-avatar-div {
    width: 80px;
    height: 80px;
}

/*头像*/
.chat-msg-avatar {
    height: 80px;
    width: 80px;
    align-items: center;
    justify-content: flex-start;
}

.image-more-div {
    margin-left: 30px;
}

/*手机*/
.image-phone {
    height: 56px;
    width: 56px;
}

/*更多*/
.image-more {
    height: 56px;
    width: 56px;
}

/*发送失败*/
.image-sending-failed-container {
    width: 100px;
    height: 60px;
    padding-left: 55px;
    padding-top: 15px;
}

.image-sending-failed {
    height: 45px;
    width: 45px;
}

/*联系人Div*/
.chat-msg-contact {
    flex: 1;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin-left: 10px;
    margin-right: 30px;
}

.chat-msg-contact div {
    flex-direction: column;
}

.title-text {
    font-size: 45px;
    color: #000000;
    width: 100%;
    margin-left: 20px;
    weights: 500;
}

/*联系人名称*/
.chat-msg-contact-name {
    font-size: 42px;
    color: #000000;
    text-overflow: ellipsis;
    flex-direction: row;
}

/*联系人电话*/
.chat-msg-contact-number {
    font-size: 32px;
    color: #7a787d;
    margin-top: 10px;
    text-overflow: ellipsis;
}

.chat-msg-contact-number-single {
    font-size: 55px;
    color: black;
    text-overflow: ellipsis;
    background-color: white;
}

/*list-item*/
.list-item {
    padding-left: 30px;
    padding-right: 30px;
    background-color: white;
}

/*收件人布局*/
.mms-receive {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/*收件人日期*/
.mms-date {
    width: 100%;
    text-align: center;
    font-size: 26px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*收件人信息+复选框布局*/
.mms-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/*基本的*/
.mms-text-base {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    padding: 20px;
}

.mms-img-base {
    border-radius: 15px;
    margin-bottom: 10px;
}

.mms-audio-base {
    width: 150px;
}

.mms-audio-container {
    flex-direction: column;
    width: 200px;
}

.mms-edit-area-audio {
    width: 100%;
    height: 90px;
    margin-left: 8px;
    align-items: center;
    background-color: #DDF5DD;
    border-radius: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

.mms-video-base {
    height: 450px;
    width: 380px;
    border-radius: 15px;
}
.mms-video-tag {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 175px;
    left: 140px;
}

.subscript {
    font-size: 18px;
    text-align: end;
    margin-top: 5px;
    padding-right: 10px;
}

/*收件人信息*/
.mms-text-left {
    border-top-right-radius: 15px;
    background-color: #F0F0F0;
}

/*发件人信息*/
.mms-text-right {
    border-top-left-radius: 15px;
    background-color: #DDF5DD;
    justify-content: flex-end;
}

.group-head-image-div {
    height: 70px;
    width: 90px;
    align-items: center;
    justify-content: center;
}

.group-head-image {
    height: 70px;
    width: 70px;
}

/*收件人复选框*/
.mms-input {
    width: 100px;
    height: 100px;
}

.empty-list-item {
    width: 100%;
    height: 50px;
}

.mms-time-star {
    flex-direction: row;
}

/*收件人时间*/
.mms-time {
    top: 9px;
    margin-bottom: 30px;
    text-align: right;
    font-size: 22px;
    color: #646464;
}

/*收信息是否加锁*/
.mms-lock-left {
    top: 10px;
    margin-left: 10px;
    height: 25px;
    width: 25px;
}

/*发信息是否加锁*/
.mms-lock-right {
    margin-right: 10px;
    height: 25px;
    width: 25px;
}

/*双卡时，代表卡1和卡2*/
.mms-card-left {
    margin-top: 10px;
    margin-left: 10px;
    height: 25px;
    width: 25px;
}

/*双卡时，代表卡1和卡2*/
.mms-card-right {
    margin-right: 10px;
    height: 25px;
    width: 25px;
}

/*发件人item*/
.mms-send {
    width: 100%;
    flex-direction: column;
    display: flex;
    margin-top: 10px;
}

/*发件人时间*/
.mms-send-date {
    text-align: center;
    width: 100%;
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 28px;
    color: grey;
}

/*包含文本、发送状态、锁状态*/
.mms-status-content {
    flex-direction: row;
}

/*发送信息文本和发送时间和发送达状态*/
.mms-status {
    flex-direction: column;
    width: 100%;
}

.mms-left-slide {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 15px;
    background-color: #DDF5DD;
    border-top-left-radius: 0px;
    width: 50%;
}

.left-mms-image {
    width: 100%;
    height: 150px;
}

.sending-status-and-content-div {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
}

.image-45 {
    height: 45px;
    width: 50px;
}

/*发件人信息+复选框布局*/
.mms-send-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
/*    width: 100%;*/
}

.border-left {
    border-top-left-radius: 0px;
}

.mms-send-text-left-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    border-radius: 15px;
    background-color: #DDF5DD;
    border-top-left-radius: 0px;
}

.mms-send-text-right-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    border-radius: 15px;
    background-color: #DDF5DD;
    border-top-right-radius: 0px;
}

.ppt-image {
    width: 64px;
    height: 64px;
    margin-right: 20px;
}

.theme-text {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}
.mms-right-slide {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 15px;
    background-color: #DDF5DD;
    border-top-right-radius: 0px;
}

.mms-image {
    width: 50%;
    height: 150px;
}

.mms-slide-text {
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
}

.text-and-send-fail {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
}

/*发件人时间和是否送达*/
.time-deliver {
    width: 100%;
    height: 50px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
}

/*群发详情按钮*/
.mms-send-detail {
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
    font-size: 22px;
    font-weight: 500;
    color: #E9005EFF;
}

/*发件人时间*/
.mms-send-time {
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
    font-size: 22px;
    color: #646464;
}

/*是否送达*/
.mms-deliver {
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
}

.mms-deliver-div {
    flex-direction: row;
}

/*送达失败样式*/
.mms-deliver-error {
    font-size: 22px;
    color: #D94028;
}

/*送达成功/送达中样式*/
.mms-deliver-success {
    font-size: 22px;
    color: #646464;
}

/*定时送达提示语*/
.mms-deliver-interval {
    font-size: 22px;
    color: #646464;
}

/*定时送达倒数秒数样式*/
.mms-deliver-interval-time {
    font-size: 22px;
    color: blue;
    margin-top: 3px;
}

/*会话列表*/
.chat-msg-list {
    width: 100%;
    height: 90%;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 120px;
}

.chat-msg-list-flag {
    width: 100%;
    height: 90%;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 670px;
}

.msg-note-mms {
    width: 100%;
    text-align: center;
    font-size: 26px;
    margin-top: 20px;
    margin-bottom: 10px;
}

/*彩信编辑*/
.mms-edit-card {
    display: flex;
    height: 100px;
    flex-direction: row;
    background-color: #DDF5DD;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.edit-card-img {
    width: 48px;
    height: 48px;
    margin-left: 10px;
    margin-right: 10px;
}

.mms-edit-card-item {
    flex-direction: column;
    padding: 5px;
    margin-right: 40px;
    align-items: center;
    justify-content: center;
}

.mms-edit-area {
    flex-direction: row;
    margin-left: 5px;
    margin-top: 10px;
    align-items: flex-end;
    justify-content: flex-end;
}

.mms-edit-area-audio {
    width: 200px;
    height: 90px;
    margin-left: 8px;
    align-items: center;
    background-color: #DDF5DD;
    border-radius: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

.mms-edit-card-text {
    height: 50px;
    align-items: flex-start;
}

.mms-edit-audio-text {
    width: 100px;
    height: 50px;
    align-items: center;
    margin-left: 5px;
}

.mms-edit-audio-delete {
    width: 32px;
    height: 32px;
    align-items: center;
}

.mms-image-container {
    flex-direction: column;
    width: 170px;
}

.mms-edit-area-image {
    width: 100%;
    height: 170px;
    margin-left: 8px;
    background-color: #A8A7A8;
    border-radius: 20px;
}

.mms-edit-area-image-bg {
    width: 170px;
    height: 170px;
    border-radius: 20px;
}
.mms-edit-delete {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 10px;
    top: 10px;
}

/*发送/编辑栏*/
.send-bar {
    display: flex;
    width: 100%;
    padding-left: 28px;
    align-items: flex-end;
    flex-direction: row;
}

/*更多按钮和全屏显示按钮*/
.full-screen-mores-false {
    width: 100px;
    height: 100px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}

.full-screen-mores-true {
    width: 100px;
    height: 200px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

/*全屏显示*/
.style-full-screen-more-full {
    width: 96px;
    height: 96px;
    padding-top: 20px;
}
.add-div {
/*    width: 40%;*/
/*    height: 60%;*/
/*    left: 10px;*/
/*    bottom: 4px;*/
    width: 100px;
    height: 80px;
    align-items: center;
}
/*更多按钮*/
.style-full-screen-more-more {
    width: 80%;
    height: 80%;
    line-height: 80px;
    align-items: center;
    margin-top: 5px;
/*    top: 5px;*/
/*    width: 96px;*/
/*    height: 96px;*/
/*    padding-top: 20px;*/
/*    padding-bottom: 20px;*/
}

/*发送文本字数统计*/
.send-text-size {
    font-size: 18px;
    margin-left: 6px;
}

/*发送按钮*/
.send-img-container {
/*    width: 80px;*/
/*    height: 70px;*/
    width: 30%;
    height: 60%;
    position: absolute;
    left: 20px;
    bottom: 4px;
}

.send-bar-send {
/*    width: 60px;*/
/*    height: 60px;*/
/*    margin-bottom: 10px;*/
/*    margin-top: 10px;*/
}

/*单个彩信更多*/
.send-bar-details-more {
    width: 100%;
    height: 140px;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
    flex-direction: row;
}

.send-bar-details-more-delete {
    width: 100%;
    height: 140px;
    align-items: center;
    justify-content: center;
    padding-left: 30px;
    padding-right: 30px;
    flex-direction: row;
}

/*更多详情 dev*/
.send-msg-detail {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
}

/*更多栏目图片*/
.send-bar-detail-image {
    width: 48px;
    height: 48px;
}

.media-swipe-div {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    flex-direction: column;
    background-color: #F7F7F7;
}

.msg-sed-bar {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    background-color: #F7F7F7;
}

.tab-content {
    width: 100%;
    height: 80%;
    justify-content: center;
}

.item-image {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.item-image-div {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.item-content {
    width: 100%;
    margin-top: 100px;
    justify-content: center;
    flex-direction: column;
}

.picture-list {
    flex-direction: column;
    columns: 4;
    align-items: center;
}

.picture-item-first {
    width: 175px;
    height: 150px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.picture-item {
    width: 175px;
    height: 150px;
    background-color: orange;
    margin-bottom: 5px;
}

.picture-item-image {
    width: 175px;
    height: 150px;
}

.picture-item-checkbox {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 5px;
    bottom: 5px;
}

.video-play-icon {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 5px;
    bottom: 5px;
}

.item-content-more {
    flex-direction: column;
    align-items: center;
}

.item-content-more-div {
    flex-direction: column;
    align-items: center;
}

.item-recording {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.recording-container {
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

#recordingBackground {
    background-color: #442686D9;
    border: 1px solid #AA2686D9;
    width: 134px;
    height: 134px;
    border-radius: 67px;
}

.image-background {
    width: 134px;
    height: 134px;
    border-radius: 67px;
    background-color: white;
}

.item-content-div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}

.tabs-recording-image {
    width: 150px;
    height: 150px;
}

.tabs-recording-time {
    font-size: 24px;
    text-color: #000000;
    justify-content: center;
}

.tabs-recording-text {
    font-size: 24px;
    text-color: #A5A5A5;
    justify-content: center;
}

.item-title {
    font-size: 60px;
}

/*更多栏目底部导航*/
.tab-bar {
    width: 100%;
    height: 120px;
    align-items: center;
    flex-direction: row;
}

/*更多栏目单个导航*/
.tab-bar-status {
    height: 100%;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/*更多栏目图片*/
.tab-bar-status-image {
    width: 48px;
    height: 48px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.item-content-vcards {
    width: 100%;
    padding-left: 10px;
    padding-right: 50px;
    margin-bottom: 10px;
}

.item-content-vcard {
    width: 25%;
    height: 160px;
    margin: 5px;
    border-radius: 20px;
    background-color: #1B808080;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    align-items: center;
}

.item-content-vcard-slide-show {
    width: 160px;
    height: 160px;
    margin: 5px;
    border-radius: 20px;
    background-color: #1B808080;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.vcard-title {
    color: black;
    margin-top: 20px;
    font-size: 20px;
}

.tab-bar-image {
    width: 45px;
    height: 45px;
    align-items: center;
}

.send-bar-detail-text {
    font-size: 22px;
}

/*删除里面布局*/
.delete-dialog-div {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 20px;
}

/*删除信息*/
.dialog-inner-text1 {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.dialog-inner-text2 {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    margin-left: 30px;
}

.dialog-tips {
    width: 100%;
    margin-top: 10px;
    text-align: left;
    font-size: 60px;
    margin-left: 30px;
}

/*删除执行逻辑div*/
.dialog-inner-logic {
    width: 100%;
    height: 60px;
    flex-direction: row;
    justify-content: center;
    margin-top: 10px;
}

.dialog-inner-cb {
    width: 100%;
    height: 80px;
    flex-direction: row;
    align-items: center;
}

.dialog-inner-cb-text {
    height: 100%;
    justify-content: center;
}

/*竖线*/
.dialog-inner-logic-vertical {
    width: 2px;
    height: 50px;
    background-color: darkgrey;
}

/*取消字体*/
.dialog-inner-logic-cancel {
    flex: 1;
    text-align: center;
    color: blue;
}

/*删除字体*/
.dialog-inner-logic-delete {
    flex: 1;
    text-align: center;
    color: red;
}

/*确认字体*/
.dialog-inner-logic-confirm {
    flex: 1;
    text-align: center;
    color: blue;
}

/*画布区域(录音动效)  父440 */
.mms-record-canvas {
    position: absolute;
    left: 150px;
    height: 420px;
    width: 420px;
}

.text-or-vcard-dialog {
    height: 400px;
    width: 100%;
    flex-direction: column;
}

.text-or-vcard-dialog-item {
    height: 100px;
    width: 100%;
    margin-left: 40px;
    margin-right: 40px;
    flex-direction: row;
    align-items: center;
}

.visibility-visible {
    visibility: visible;
}

.visibility-hidden {
    visibility: hidden;
}

.bottom-input {
    background-color: white;
    border-radius: 30px;
    margin-bottom: 25px;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-top: 10px;
    margin-left: 12px;
}

/* 底部标签栏 */
.bottom-input-image {
    flex-direction: row;
    align-items: center;
    width: 25%;
    height: 40px;
    margin-left: 30px;
}

.bottom-card {
    width: 50%;
    height: 50px;
}

.down-image {
    width: 50%;
    height: 44px;
}

/*输入框*/
.send-bar-input {
    width: 420px;
    background-color: #FFF;
}

/*发送emoji*/
.send-bar-emoji {
    margin-left: 20px;
    margin-top: 30px;
    top: 6px;
    width: 100px;
}

.send-bar-emoji-div {
    height: 120px;
}

/*发送*/
.send-button-text {
    width: 176px;
    height: 96px;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

/*短信详情弹窗*/
.mms-details {
    width: 100%;
    margin-left: 20px;
    margin-right: 20px;
    flex-direction: column;
}

/*详情标题*/
.mms-details-title {
    font-size: 48px;
    margin-top: 30px;
    margin-bottom: 40px;
}

/*详情文字*/
.mms-details-text {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 32px;
    margin-left: 30px;
}

/*知道了文字*/
.mms-details-cancel {
    width: 100%;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 32px;
    color: #1E94FB;
}

/*重新发送弹框展示*/
.fail_dialog {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 10px;
    padding-right: 10px;
}

.fail_text {
    margin-bottom: 20px;
    margin-left: 45px;
    margin-right: 45px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.fail_text_title {
    font-size: 35px;
}

.text-font-28 {
    font-size: 28px;
}

.text-font-40 {
    font-size: 40px;
}

.list-item-size {
    flex-direction: column;
    width: 100%;
    height: 65px;
    padding-left: 40px;
    padding-right: 20px;
    justify-content: center;
}

.fail_button {
    flex-direction: row;
    height: 80px;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
}

.btn_cancel_double {
    color: #F30000FF;
    width: 50%;
}

.btn_restore_double {
    color: #F30000FF;
    width: 50%;
}

.fail_divider {
    stroke-width: 1px;
    height: 50px;
    color: #A1808080;
}

/*相机*/
.show-Camera {
    width: 100%;
    height: 100%;
}

/*切换前后置摄像头*/
.cut-Camera {
    width: 36px;
    height: 36px;
    position: absolute;
    radius: 18px;
    left: 85%;
    font-size: 12px;
    top: 20px;
}

.shoot-image {
    width: 48px;
    height: 48px;
    radius: 24px;
    background-color: aqua;
    position: absolute;
    left: 45%;
    top: 85%;
}

.text-container {
    flex-direction: column;
}

.slide-counter {
    width: 60px;
    font-size: 12px;
}

.textarea-divider {
    border-bottom: 1px solid lightgray;
    width: 90%;
    margin-left: 8%;
}